<template>
  <div class="cards">

    <div style="text-align: center; padding: 20px;">会员卡交易明细</div>

    <div v-if="memberCards.length === 1">
      <HMemberCardVue :card="selectedCard!" />
    </div>

    <van-swipe v-else-if="memberCards.length > 1"  @change="onCardChanged">
      <van-swipe-item v-for="card in memberCards" :key="card.id!">
        <HMemberCardVue :card="card" />
      </van-swipe-item>
    </van-swipe>


    <van-divider content-position="left">使用详情</van-divider>

    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      style="height: calc(100vh - 380px); overflow-y: auto;"
      @load="getHistory"
    >
      <div v-for="item of transactions" :key="item.id!" class="list-item">
        <div class="detail">
          <div>本次扣费: {{ item.consumption }}</div>
          <div>余额: {{ getBalance(item) }}</div>
        </div>
        <div style="color: gray;">进场时间: {{ formatDate(item.created_at) }}</div>
      </div>
    </van-list>
  </div>
</template>

<script lang="ts" setup>
import { get } from 'lodash-es'
import dayjs from 'dayjs'
import { reactive, ref, onMounted } from 'vue';
// import { useRoute } from 'vue-router'
// import QRCode, { QRCodeToDataURLOptions } from 'qrcode'
import { useAppStore } from '@/store/modules/app'
import { getHMemberCardListApi, getHMemberCardHistoryApi } from '@/api/wechat'
import { HMemberCardTransaction, type HMemberCard } from '@/api/wechat/types'
import HMemberCardVue from '@/components/HMemberCard.vue'

const appStore = useAppStore()
appStore.setTabbarIndex(1)

const pageSize = ref(10)
const pageIndex = ref(1)
const transactions = reactive<HMemberCardTransaction[]>([])
const loading = ref(false);
const finished = ref(false);

const memberCards = reactive<HMemberCard[]>([])

const selectedCard = ref<HMemberCard>()
// const route = useRoute()

onMounted(() => {
  getMemberCardList()
})

const getMemberCardList = async () => {
  const res = await getHMemberCardListApi()
  memberCards.length = 0
  if (res.data.length > 0) {
    selectedCard.value = res.data[0] 
    Object.assign(memberCards, res.data)
    await getHistory()
  } 
}

const formatDate = (date) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm')
}

const getBalance = (t: HMemberCardTransaction) => {
  if (get(t, 'hmember_type.card_category') === 'counting') {
    return t.balance + '次'
  }

  return t.balance + '天'
}

const onCardChanged = async (index) => {
  selectedCard.value = memberCards[index]
  pageIndex.value = 1
  transactions.length = 0
  await getHistory()
}

const getHistory = async () => {
  if (selectedCard.value) {
    const { data } = await getHMemberCardHistoryApi({ hmember_card_id: selectedCard.value?.id, pageIndex: pageIndex.value,  pageSize: pageSize.value })
    loading.value = false
    pageIndex.value += 1
    for (const row of data.rows) {
      transactions.push(row)
    }

    if (transactions.length >= data.count) {
      finished.value = true
    }
  }
}
</script>

<style lang="scss" scoped>
.list-item {
  border-radius: 10px;
  width: 94%;
  margin: 0 auto;
  height: 100px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  padding: 20px;
  box-sizing: border-box;

  .detail {
    display: flex; 
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 10px;
  }
}

.list-item+.list-item {
  margin-top: 20px;
}
</style>
